<template>
  <div class="news-detail_container" v-if="newsInfo">
    <h3 class="news-title text-center" style="">
      {{newsInfo.title}}
    </h3>
    <h3 style="font-size: 0.38333rem; text-align: center"></h3>
    <div class="container">
      <div class="article-control">
        <div>作者：{{newsInfo.author}}</div>
        <div>日期：{{newsInfo.addtime}}</div>
      </div>
    </div>
    <div class="article">
      <div class="container">
        <div v-html="newsInfo.content"></div>
      </div>
    </div>

    <!-- <div class="related class-news_wrapper">
      <div class="class-news_item">
        <ul class="class-news_content">
          <li class="col-lg-6 col-sm-6 col-xs-12">
            <a href="/zhanhuihuodong/831.html"
              >上一篇：全城招募，仅限30个名额，送价值2092元的产后康复套餐！全城招募，仅限30个名额...</a
            >
          </li>
          <li class="col-lg-6 col-sm-6 col-xs-12">
            <a href="/zhanhuihuodong/830.html"
              >下一篇：全城招募，仅限30个名额，送价值2092元的产后康复套餐！全城招募，仅限30个名额...</a
            >
          </li>
        </ul>
      </div>
    </div> -->
  </div>
  <van-empty description="暂无数据" v-else />
</template>

<script>
import { newsDetailService } from '@/service/user';
export default {
  data(){
    return {
      newsInfo:{}
    }
  },
  created(){
    this.fetchNewsInfo(this.$route.params.id)
  },
  methods:{
    async fetchNewsInfo(id){
      let result = await newsDetailService(id)
      if(result.status == 200){
        this.newsInfo = result.data
      }else{
        this.$toast(result.message)
      }
    }
  }
};
</script>

<style lang="less">
.news-detail_container {
  background: #fff;
  padding: 10px;
}

.news-detail_container .news-title {
  padding: 0.266667rem 0;
  margin-bottom: 0.16rem;
  margin-top: 0.066667rem;
  font-size: 0.533333rem;
  line-height: 1.5;
}

.news-detail_container .article-control {
  color: grey;
  font-size: 0.32rem;
  padding-bottom: 0.266667rem;
  -ms-flex-pack: distribute;
  -webkit-box-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 0.013333rem solid #e6e6e6;
}

.news-detail_container .article-control div {
  font-size: 0.32rem;
  margin: 0 0.106667rem;
}

.news-detail_container .article {
  padding: 0.533333rem 0;
}

.news-detail_container .article .label,
.news-detail_container .article label {
  margin-right: 0.266667rem;
  margin-bottom: 0.266667rem;
  background: #fff !important;
  color: #777;
}

.news-detail_container .article p {
  font-size: 0.373333rem;
  line-height: 1.5;
  color: #333;
}

.news-detail_container .article img {
  max-width: 100%;
  margin: 0 auto;
  display: inline-block;
  width: 100% !important;
  height: auto !important;
}
.related .related-title {
  margin-top: 0;
  margin-bottom: 0.33rem;
  font-size: 0.373333rem;
  padding-bottom: 0.3222rem;
  border-bottom: 1px solid #eee;
}

.related.class-news_wrapper {
  margin-top: 0;
  margin-bottom: 0.533333rem;
  overflow: hidden;
  padding: 0 0.4rem 0.4rem 0.4rem;
}

.related.class-news_wrapper .class-news_item .class-news_content {
  margin: 0 -0.2rem;
  border: none;
}

.related.class-news_wrapper .class-news_item .class-news_content li {
  padding: 0;
  border-bottom: none;
}

.related.class-news_wrapper .class-news_item .class-news_content li a {
  padding: 0.106667rem 0;
  width: 100%;
  display: inline-block;
  color: #0061ad;
}

.related.class-news_wrapper .class-news_item .class-news_content li a:before {
  content: "";
  background: #0061ad;
  display: inline-block;
  width: 0.106667rem;
  height: 0.106667rem;
  border-radius: 50%;
  margin-right: 0.16rem;
  vertical-align: middle;
}

.related.class-news_wrapper .class-news_item .class-news_content li .date {
  display: none;
}
</style>